
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 Loading Animation</title>
    <script src="https://dn-amber-js.qbox.me/jquery-2.1.3.min.js"></script>
    <style type="text/css">
        body {
            background: #161616 ;
            margin: 0;
            padding: 0;
            height: 100%;
        }
        a {
            text-decoration:none;
            color:#00c6ff;
        }
        #content {
            width:100%;
            height:5px;
            margin:50px auto;
            background:#000;
        }
        .fullwidth .expand {
            width:100%;
            height:1px;
            margin:2px 0;
            background:#2187e7;
            position:absolute;
            box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
            -moz-animation:fullexpand 10s ease-out;
            -webkit-animation:fullexpand 10s ease-out;
        }
        @-moz-keyframes fullexpand {
            0%  { width:0px;}
            100%{ width:100%;}
        }
        @-webkit-keyframes fullexpand {
            0%  { width:0px;}
            100%{ width:100%;}
        }
         .triggerFull {
            background: #000000;
            background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
            background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
            border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
            font-family: Verdana, Geneva, sans-serif;
            font-size: 0.8em;
            text-decoration: none;
            text-transform: lowercase;
            text-align: center;
            color: #fff;
            padding: 10px;
            border-radius: 3px;
            display: block;
            margin: 0 auto;
            width: 140px;
        }
    </style>
    <script>
        $(document).ready(function() {
                $('#content').removeClass('fullwidth').delay(10).queue(function(next){
                    $(this).addClass('fullwidth');
                        setTimeout(function(){
                            var s_wid=$(".expand");
                            alert(s_wid.width())
                            $("#content").hide();
                        },2000);
                    next();
                });
                return false;
            });
    </script>

</head>
<body>
<div id="content" style="border: 1px solid red;">
    <span class="expand"></span>
</div>

</body>
</html>
